import classNames from 'classnames'
import './index.scss'
import { useSelector, useDispatch } from 'react-redux'
import { useEffect } from 'react'
import { changeActiveIndex } from '../../store/modules/takeaway'

const Menu = () => {
  // 从redux中获取数据
 const { foodsList,activeIndex} = useSelector((state) => state.foods);
 //过滤条件: 过滤出所有标签，并且去除重复的
 const menus=foodsList.map(item=>({tag:item.tag,name:item.name}))
//  console.log("我是activeIndex:",activeIndex)
 const dispatch = useDispatch()
  // 使用useEffect触发action
  useEffect(() => {
    dispatch(changeActiveIndex(0))
  }, [dispatch])

  return (
    <nav className="list-menu">
      {/* 添加active类名会变成激活状态 */}
      {menus.map((item, index) => {

        return (
          <div
            onClick={() => {dispatch(changeActiveIndex(index))}}
            key={item.tag}
            className={classNames(
              'list-menu-item',
              activeIndex===index&&'active'
            )}
          >
            {item.name}
          </div>
        )
      })}
    </nav>
  )
}

export default Menu
